<template>
  <view class="container">
    <view class="nav">
      <uni-segmented-control
        :current="current"
        :values="items"
        style-type="text"
        :active-color="'#007aff'"
        @click-item="onClickItem"
      />
    </view>

    <view v-if="current === 0" class="week-box">
      <WeekList></WeekList>
    </view>

    <view v-if="current === 1">
      <CategoryList></CategoryList>
    </view>
  </view>
</template>

<script setup lang="ts">
import WeekList from './week/index.vue'
import CategoryList from './category/index.vue'
import { shenLunService } from '@/apis'
import { ref } from 'vue'

const current = ref(0)
const items = ['本周总结', '主题分类']

const onClickItem = (e) => {
  console.log(e)
  current.value = e.currentIndex
}

const lookDetailHandle = (item: any) => {
  console.log(item)

  uni.navigateTo({
    url: `/pages/shen-lun/gui-fan-ci/detail?id=${item.id}`,
  })
}

const categoryList = ref<
  Array<{
    id: number
    name: string
  }>
>()
const getKgSlNormsWordsTypeList = async () => {
  const res = await shenLunService.getKgSlNormsWordsTypeList()

  shenLunService.getKgSlNormsWordsTypeList

  categoryList.value = res.data
}
getKgSlNormsWordsTypeList()

const weekList = ref<shenLunService.ShenLunNormsWords[]>()
const getWeekList = async () => {
  const res = await shenLunService.getWeekList()

  weekList.value = res.data
}

getWeekList()
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  .nav {
    position: sticky;
    background-color: #fff;
    top: 0;
  }

  .week-box {
    box-sizing: border-box;
    padding: 20rpx;
  }

  .empty-box {
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }

  .week-item {
    width: 100%;

    background-color: #fff;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 40rpx;

    .topic-box {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 1rem;
        font-weight: 700;
      }
    }

    .context {
      margin-top: 20rpx;

      max-height: 130rpx;
      overflow: hidden;
      word-break: break-all; /* break-all(允许在单词内换行。) */
      text-overflow: ellipsis; /* 超出部分省略号 */
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      -webkit-line-clamp: 3; /** 显示的行数 **/

      .context-item {
        font-size: 0.8rem;
        color: #6d6d6d;
      }
    }
  }

  .item {
    width: 100%;
    height: 200rpx;
    background-color: #fff;
    margin: 20rpx 0;
    border-radius: 20rpx;

    .title {
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      font-size: 1rem;
      font-weight: 700;
    }
  }

  .action-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10rpx;

    .but {
      width: 45%;
      height: 75rpx;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
    }

    .start-test {
      background-color: rgba(#2979ff, 0.2);
      color: #2979ff;
    }
    .start-study {
      background-color: #2979ff;
      color: #fff;
    }
  }
}
</style>
